<template>
	<view class="content">
		<image class="fh" src="../../static/guangyiguang/fh.png" @click="fh()" mode="aspectFill"></image>
		<image class="bgimg" :src="HOSTURL+info.head_portrait" mode="widthFix"></image>
		<view class="nr">
			<image class="header" :src="HOSTURL+info.head_portrait" mode="aspectFill"></image>
			<view class="xinxi">
				<view class="name">
					{{info.name}}
				</view>
				<view class="address">
					{{info.city}} · {{info.age}}岁
				</view>
				<view class="fs">
					<!-- <view class="">
						<span>123</span>粉丝
					</view> -->
					<view class="">
						<span>{{info.attention}}</span>关注
					</view>
					<view class="">
						<span>{{info.seenum}}</span>访客
					</view>
				</view>
				<view class="xc" v-if="info.photo_album!='[]'">
					<view class="title">
						相册
					</view>
					<scroll-view class="photo" scroll-x="true" >
						<image v-for="(item,index) in info.photo_album" :src="HOSTURL+item" @click="pictureView(HOSTURL+item)" mode="aspectFill"></image>
					</scroll-view>
				</view>
				<view class="taxinxi">
					TA的信息
				</view>
				<view class="xxxinxi">
					<view class="left">
						<view class="">
							<span>年龄：</span>{{info.age}}
						</view>
						<view class="">
							<span>身高：</span>{{info.stature}}cm
						</view>
						<view class="">
							<span>职业：</span>{{info.occupation}}
						</view>
						<view>
							<span>联系方式：</span><span class="lxfs" @click="zhifu()">查看微信</span>
						</view>
					</view>
					<view class="right">
						<view class="">
							<span>性别：</span>{{info.sex}}
						</view>
						<view class="">
							<span>体重：</span>{{info.weight}}kg
						</view>
						<view class="">
							<span>活动城市：</span>{{info.city}}
						</view>
					</view>
				</view>
				<view class="taxinxi">
					个性签名
					<view class="gxqm">
						{{info.slogan}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="left">
				<view class="" @click="zhifu()">
					<image src="../../static/guangyiguang/tjhy.png" mode="aspectFill"></image>
				</view>
				<view class="" @click="zhifu()">
					<image src="../../static/guangyiguang/fxx.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="right" @click="zhifu()">
				<image src="../../static/guangyiguang/lt.png" mode="aspectFill"></image>
				<view class="">
					与TA聊天
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HOSTURL:this.$HOSTURL,
				id:0,
				info:[],
				
			}
		},
		onLoad(options) {
			var that = this;
			that.id = options.id;
			that.details();
		},
		methods: {
			details(){
				var that = this;
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: that.global.url + '/api/guangyiguang/user',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					data: {
						id:that.id
					},
					success: (res) => {
						console.log('首页数据')
						console.log(res)
						uni.hideLoading()
						if (res.data.code == 200) {
							that.info = res.data.result
						} else {
							console.log(res);
						}
					}
				})
			},
			pictureView(logourl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = logourl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			fh(){
				uni.navigateBack({
					delta: 1
				});
			},
			zhifu(){
				var that = this;
				console.log(that.$store.state.hasLogin);
				if (!that.$store.state.hasLogin) {
					uni.redirectTo({
						url: '/pages/login/index'
					})
				}else{
					if(uni.getStorageSync('pay_authentication') == 0){						
						uni.redirectTo({
							url: '/pages/appview/authentication'
						})
					}else{
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #fff;
		min-height: 100vh;
		.bgimg{
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			z-index: 1;
			-webkit-filter: blur(5rpx);
			filter: blur(15rpx) brightness(70%);
			transform: scale(1.2);
		}
		.nr{
			position: absolute;
			top: 25%;
			left: 0;
			z-index: 2;
			width: 100%;
			min-height: 25vh;
			background: #fff;
			border-radius: 30rpx 30rpx 0 0 ;
			padding-bottom: 50rpx;
			
			.header{
				position: absolute;
				top: -100rpx;
				left: 40rpx;
				z-index: 3;
				width: 200rpx;
				height: 200rpx;
				border-radius: 25rpx;
			}
			
			.xinxi{
				margin: 150rpx 40rpx;
				font-weight: 600;
				.xc{
					.title{
						margin-top: 30rpx;
					}
					.photo{						
						width: 100%;
						white-space: nowrap;
						image{
							width: 150rpx;
							height: 150rpx;
							border-radius: 25rpx;
							display: inline-block;
							margin:10rpx;
						}
					}
				}
				.name{
					font-size: 32rpx;
				}
				.address{
					color: #bdbdbd;
					margin-top: 20rpx;
					font-size: 24rpx;
				}
				.fs{
					margin-top: 40rpx;
					margin-right: 360rpx;
					display: flex;
					justify-content: space-between;
					view{
						font-size: 24rpx;
						span{
							font-size: 36rpx;
							margin-right:10rpx;
						}
					}
				}
			}
			.taxinxi{
				margin-top: 30rpx;
				font-size: 34rpx;
				font-weight: 600;
				.gxqm{
					background: #b8e4f9;
					color: #828282;
					width: 100%;
					min-height: 80rpx;
					border-radius: 25rpx;
					font-size: 24rpx;
					font-weight: 500;
					padding: 30rpx;
					margin-top: 30rpx;
				}
			}
			.xxxinxi{
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				.left,.right{
					width: 50%;
					view{
						margin-top: 20rpx;
						span{
							color: #bdbdbd;
						}
						.lxfs{
							color:blue;
						}
					}
				}
			}
		}
		.bottom{
			position: fixed;
			bottom: 40rpx;
			left: 0;
			z-index: 5;
			display:flex;
			width: 100%;
			.left{
				width: 50%;
				display: flex;
				view{
					margin: auto 0;
					margin-left: 60rpx;
					width: 100rpx;
					height: 100rpx;
					background: #fff;
					border-radius: 50%;
					border: 1px solid #ececec;
					image{
						margin: 20rpx;
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
			.right{
				width: 48%;
				height: 120rpx;
				margin-right: 2%;
				background: royalblue;
				border-radius: 60rpx;
				display: flex;
				image{
					margin: auto 20rpx auto 75rpx;
					width: 40rpx;
					height: 40rpx;
				}
				view{
					color: #fff;
					font-size: 28rpx;
					line-height: 120rpx;
				}
			}
		}
		.fh{
			position: fixed;
			top: 90rpx;
			z-index: 9;
			left: 40rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>
